<html><head>
        <title>SheetJS Live Grid Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="icon" type="image/png" href="assets/img/logo.png">
        <link rel="stylesheet" href="assets/css/sheetjs.css">
    <style type="text/css"></style></head>
    <body style="">
        <script type="text/javascript" async="" src="assets/vendor/ga.js"></script>
		<script src="assets/vendor/alertify.js"></script>
        <script src="assets/vendor/jquery.min.js"></script>
        <script src="assets/vendor/jquery.handsontable.full.js"></script>
        <script src="assets/vendor/bootstrap.min.js"></script>

        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" media="screen" href="assets/vendor/jquery.handsontable.full.css">
		<link rel="stylesheet" media="screen" href="assets/vendor/samples.css"> 
        <link rel="stylesheet" media="screen" href="assets/vendor/alertify.css">


        <div class="container" >
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <h1>
                        Excel表快捷动态导入
                    </h1>
                    <div class="row clearfix" style="margin-top: 20px;">
                        <div class="col-md-4 column">
                            <div class="row clearfix panel panel-default">
                                <div class="col-md-12 column panel-heading">
                                        <h3 class="panel-title">
                                            数据库连接信息：
                                        </h3>
                                </div>
                                <div class="col-md-12 column panel-body">
                                    <div class="col-md-8 column">
                                        <div class="form-group">
                                            <input class="form-control" type="text" value="未连接" id="Constatus" disabled />
                                        </div>
                                    </div>
                                    <div class="col-md-4 column">
                                        <button type="button" class="btn btn-default" id="dsbtn">创建</button>
                                    </div>
                                </div>
                                </div>
                        </div>
                        <div class="col-md-4 column">
                            <div class="row clearfix panel panel-default">
                                <div class="col-md-12 column panel-heading">
                                    <h3 class="panel-title">
                                        数据库建表信息：
                                    </h3>
                                </div>
                                <div class="col-md-12 column panel-body">
                                    <div class="col-md-8 column">
                                        <div class="form-group">
                                            <select class="form-control" id="selectT">
                                               	
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 column">
                                        <button type="button" class="btn btn-default" id="ctbtn">创建</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 column">
                            <div class="row clearfix panel panel-default">
                                <div class="col-md-12 column panel-heading">
                                    <h3 class="panel-title">
                                        导入框：
                                    </h3>
                                   
                                </div>
                                <div class="col-md-12 column panel-body">
                                	<div class="col-md-8 column">
	                                    <div id="left">
		            						<div id="drop">这里导入文件</div>
								           
								            
	        							</div>
	        						</div>
	        						<div class="col-md-4 column">
                                        <button class="btn btn-default" id="upload">提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
		</div>
        
        <div class="container">
        	<!-- <div class="panel panel-default">
			      <div class="panel-heading">
			        		<h3>操作说明</h3>
			      </div>
			       <div class="panel-body">
			        		
			       </div>
		   </div> -->  
		   <div>
		   	<ul>
		   		<li>第一步：输入数据库连接信息（url参数形式必须是“jdbc:mysql://localhost:3306/....”）。</li>
		   		<li>第二步：选择需要导入的表，如果没有则可创建表，输入建表语句（该建表语句将直接影响导入数据的结果）。</li>
		   		<li>第三步：将待导入的表格拖入导入框，核对（可编辑）表格信息后提交，即完成导入。</li>
		   	</ul>
		   </div>
        </div>
        
         <div class="container" style="margin-bottom:200px;">
	         <div id="buttons" class="btn-group"></div>
	            <div id="hot" style="overflow: scroll" class="handsontable"></div>
	            <div id="footnote">
	                声明-----
	            </div>
         </div>
        
        
        
          
        
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">请输入数据库连接信息</h4>
		            </div>
		            <div class="modal-body">
		            	<label class="control-label">driverClassName：</label>
		            	<select class="form-control" id="className">
		            		<option>com.mysql.jdbc.Driver</option>
		            		<option>oracle.jdbc.driver.OracleDriver</option>
		            	</select>
		            	<label class="control-label">url：</label>
		            	<input type="text" class="form-control" id="baseUrl" value="">
		            	<label class="control-label">username：</label>
		            	<input type="text" class="form-control" placeholder="" id="username">
		            	<label class="control-label">password：</label>
		            	<input type="password" class="form-control" placeholder="" id="password">
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancle">取消</button>
		                <button type="button" class="btn btn-primary" id="afconn">确认</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">请输入建表语句</h4>
		            </div>
		            <div class="modal-body">
		            	<textarea class="form-control" rows="8" id="tableSql"></textarea>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancle">取消</button>
		                <button type="button" class="btn btn-primary" id="afcreateTable">确认</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
            
        <script src="assets/js/shim.js"></script>
        <script src="assets/js/xlsx.full.min.js"></script>
        <script src="assets/js/dropsheet.js"></script>
        <script src="assets/js/main.js"></script>

        <script src="assets/vendor/spin.js"></script>

        <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-36810333-1']);
          _gaq.push(['_setDomainName', 'sheetjs.com']);
          _gaq.push(['_setAllowLinker', true]);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
    

</body></html>